<template>
  <div class="secure-toolbar flex justify-between">
    <div>
      <div class="secure-button create" @click="create"> 新增 </div>
    </div>
    <div class="flex gc-2">
      <!-- 全选/反选 -->
      <template v-if="data.list.length > 0">
        <div
          v-if="selectKeys.size !== data.list.length"
          class="secure-button select-all"
          @click="selectAll"
        >
          <span>全选</span>
        </div>
        <div v-else class="secure-button unselect" @click="unselect">
          <span>反选</span>
        </div>
      </template>
      <div v-if="selectKeys.size > 0" @click="deleteRecord">
        <img width="32" :src="deletePng" class="cursor-pointer" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import deletePng from '@/assets/images/delete.png';
  import { programData } from '@/store/modules/program/utils';
  import { create, selectKeys } from '../bus';
  import { notify } from '../notify/bus';

  const data = programData();
  const selectAll = () => {
    data.list.forEach((e) => {
      selectKeys.value.add(e.id);
    });
  };
  const unselect = () => {
    selectKeys.value.clear();
  };

  const deleteRecord = () => {
    notify({
      title: '警告',
      msg: `你将删除${selectKeys.value.size}项`,
      onConfirm() {
        data.list = data.list.filter((e) => {
          return !selectKeys.value.has(e.id);
        });
        selectKeys.value.clear();
      },
    });
  };
</script>

<style lang="scss" scoped>
  .secure-toolbar {
    padding: var(--padding);
    height: 66px;
  }
  .create {
    background-color: var(--primary);
    color: white;
  }
  .select-all {
    color: #333;
    &:hover {
      color: #121212;
      background-color: #f8f8f8;
    }
  }
  .unselect {
    color: #121212;
    background-color: #f8f8f8;
    &:hover {
      background-color: #eee;
    }
  }

  @media (max-width: 750px) {
    .secure-toolbar {
      padding: 0px 8px;
      height: fit-content;
    }
  }
</style>
